// 主题色 - 现代化色彩方案
$primary-color: #5B5FDE;
$primary-gradient: linear-gradient(135deg, #5B5FDE 0%, #7C3AED 100%);
$success-color: #10B981;
$success-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
$warning-color: #F59E0B;
$warning-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
$danger-color: #EF4444;
$danger-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
$info-color: #3B82F6;

// 文字颜色 - 提高可读性
$text-primary: #1F2937;
$text-regular: #4B5563;
$text-secondary: #6B7280;
$text-placeholder: #9CA3AF;

// 边框颜色 - 更加精致
$border-color-base: #E5E7EB;
$border-color-light: #F3F4F6;
$border-color-lighter: #F9FAFB;
$border-color-extra-light: #FFFFFF;

// 背景颜色 - 减少视觉疲劳
$background-color-base: #F9FAFB;
$background-color-light: #FFFFFF;
$background-color-lighter: #FFFFFF;
$background-color-dark: #F3F4F6;

// 布局相关
$header-height: 60px;
$sidebar-width: 220px;
$sidebar-collapse-width: 64px;

// 断点 - 更完善的响应式设计
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;

// 圆角 - 现代化设计
$border-radius-base: 8px;
$border-radius-small: 4px;
$border-radius-large: 12px;
$border-radius-xl: 16px;
$border-radius-circle: 50%;

// 阴影系统 - 增强层次感
$box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$box-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$box-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$box-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$box-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// 过渡 - 更流畅的动画
$transition-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-fade: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

// Z-index
$z-index-normal: 1;
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 动画时长
$animation-duration-fast: 0.15s;
$animation-duration-base: 0.3s;
$animation-duration-slow: 0.5s;

// 间距系统 - 统一的间距规范
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-base: 16px;
$spacing-md: 24px;
$spacing-lg: 32px;
$spacing-xl: 48px;

// 暗黑主题变量
:root {
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #c0c4cc;
  --el-border-color-base: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-fill-color-blank: #ffffff;
}

html.dark {
  --el-bg-color: #141414;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-border-color-base: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-fill-color-blank: #141414;
}